<template>
  <div>

    <div
      style="width: 100%;height: 40px; border: #E4E4E4 solid 1px;margin-top: 10px;padding: 5px;background-color: #F3F3F3">
      <span style="font-size: 12px;margin-left: 20px">筛选查询</span>
    </div>
    <div style="background-color: #FFFFFF;height: 160px;">
      <div style="margin-left: 40px;line-height: 50px;">
        日期：
        <el-date-picker v-model="filters.billDate" type="daterange" range-separator="To" start-placeholder="开始时间"
          end-placeholder="结束时间" value-format="YYYY-MM-DD" />

        <el-select v-model="filters.supplierName" clearable placeholder="供应商" style="width: 120px;margin-left: 10px"
          @click="sup">
          <el-option v-for="item in statusOptions1" :key="item.id" :label="item.label" :value="item.name" />
        </el-select>
        <el-select v-model="filters.warehouse" clearable placeholder="仓库" style="width: 120px;margin-left: 10px"
          @click="ware">
          <el-option v-for="item in statusOptions2" :key="item.id" :label="item.label" :value="item.name" />
        </el-select>
        <el-button style="margin-left: 20px" @click="initData()">查询结果</el-button>
      </div>
      <div>
        <el-row :gutter="20" style="margin-left: 45px;margin-top: 20px">
          <el-col :span="6">
            <div style="background-color: #FB7884;width: 230px;height: 70px;">
              <div style="text-align:center;padding-top: 15px;color:#FFFFFF;font-size: 13px;">{{ num }}<br>采购单总数</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div style="background-color: #03A9F3;width: 230px;height: 70px;">
              <div style="text-align:center;padding-top: 15px;color:#FFFFFF;font-size: 13px;">{{ shopNum }}<br>采购商品数
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div style="background-color: #9675CE;width: 230px;height: 70px;">
              <div style="text-align:center;padding-top: 15px;color:#FFFFFF;font-size: 13px;">{{ moneys }}<br>采购总金额
              </div>
            </div>
          </el-col>
          <el-col :span="6"></el-col>
        </el-row>
      </div>
    </div>
    <div
      style="width: 100%;height: 40px; border: #E4E4E4 solid 1px;margin-top: 10px;padding: 5px;background-color: #F3F3F3">
      <span style="font-size: 12px;margin-left: 20px">企业列表</span>
      <!--工具条-->
      <div class="toolbar">
        <el-button type="primary" size="small" @click="exExcel">导出</el-button>
      </div>
    </div>

    <!-- 数据列表 -->
    <el-table :data="tableData" style="width: 100%" border stripe>
      <el-table-column prop="billDate" label="采购日期" width="150" header-align="center" align="center" />
      <el-table-column prop="code" label="采购单编号" width="180" header-align="center" align="center" />
      <el-table-column prop="goodscode" label="商品编号" width="165" header-align="center" align="center" />
      <el-table-column prop="goodsname" label="商品名称" width="200" header-align="center" align="center" />
      <el-table-column prop="spec" label="规格型号" width="200" header-align="center" align="center" />
      <el-table-column prop="unit" label="单位" width="140" header-align="center" align="center" />
      <el-table-column prop="warehouse" label="仓库" width="120" header-align="center" align="center" />
      <el-table-column prop="num" label="数量" width="120" header-align="center" align="center" />
    </el-table>

  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { queryPurchaseReport, querySupplierName, queryWarehouseName, exportPurchaseReport } from "@/api/report/purchaseReport";
import host from "@/utils/env";
import { getUser } from '@/utils/session.js'

//搜索选择框
const statusOptions1 = ref({})
const statusOptions2 = ref({})

const tableData = ref([])

//获取用户信息
let user = {};
user = getUser();


//查询条件
const filters = ref({
  supplierName: "",
  warehouse: "",
  billDate: ""
})

//采购商品数
let shopNum = ref(0);
let moneys = ref(0);
let num = ref(0);
let data = {
  "eid": user.eid
}
//查询供应商名称
async function sup() {
  let res = await querySupplierName(data);
  if (res.code == 200) {
    statusOptions1.value = res.data;
  }
}

//查询仓库名称
async function ware() {
  let res = await queryWarehouseName(data);
  if (res.code == 200) {
    statusOptions2.value = res.data
  }
}

//采购报表列表
async function initData() {
  if (filters.value.billDate == null) {
    filters.value.billDate = ""
  }
  num.value = 0;
  shopNum.value = 0;
  moneys.value = 0;

  let data = {
    supplierName: filters.value.supplierName,
    warehouse: filters.value.warehouse,
    begin: filters.value.billDate[0],
    end: filters.value.billDate[1]
  }
  let res = await queryPurchaseReport(data)
  if (res.code == 200) {
    tableData.value = res.data;
  }
  tableData.value.forEach(el => {
    num.value++;
    shopNum.value += new Number(el.num);
    moneys.value += new Number(el.num) * new Number(el.price);
  })
}

//导出采购单
async function exExcel() {
  let res = await exportPurchaseReport({})
  if (res.code == 200) {
    let url = host + res.data;
    window.open(url)
  }
}

onMounted(() => {
  initData();
})
</script>
<style scoped>
.toolbar {
  float: right;
}
</style>